<template>
  <base-container>
    <el-scrollbar height="81vh" ref="scrollRef" @scroll="({}) => {}">
      <el-card shadow="never">
        <SubTitle title="客户信息"></SubTitle>
        <div class="pt-20px">
          <CCForm
            :params="state.customerInfoParams"
            :forms="state.customerInfoForms"
            :gutter="20"
            label-position="top"
            ref="customerInfoRef"
          >
            <template #customerLogo="{ form }">
              <CCUpload :form="form" @custom-upload="customUpload" @handle-remove="handleRemove"></CCUpload>
            </template>
          </CCForm>
        </div>
      </el-card>
      <el-card shadow="never" class="mt-10px">
        <SubTitle title="企业信息"></SubTitle>
        <h1 class="text-16px py-20px text-[#1C174D]">营业执照信息</h1>
        <CCForm
          :forms="state.EnterpriseInfoForms"
          :params="state.customerInfoParams"
          :gutter="20"
          label-position="top"
          ref="EnterpriseInfoRef"
          @handle-select-change="handleSelectChange"
        >
          <template #businessLicenseUrl="{ form }">
            <CCUpload :form="form" @custom-upload="customUpload" @handle-remove="handleRemove"></CCUpload>
          </template>
        </CCForm>
        <h1 class="text-16px py-20px text-[#1C174D]">{{ businessLicenseTypeTitle }}</h1>
        <div class="w-1/2">
          <CCForm
            :params="state.customerInfoParams"
            :forms="state.corporateIdentityInfoForms"
            :gutter="20"
            label-position="top"
            ref="corporateIdentityInfoRef"
            @handle-upload-change="handleUploadChange"
          >
            <template #idCardFrontUrl="{ form }">
              <CCUpload :form="form" @custom-upload="customUpload" @handle-remove="handleRemove"></CCUpload>
            </template>
            <template #idCardBackUrl="{ form }">
              <CCUpload :form="form" @custom-upload="customUpload" @handle-remove="handleRemove"></CCUpload>
            </template>
          </CCForm>
        </div>
      </el-card>
      <el-card shadow="never" class="mt-10px">
        <SubTitle title="开通信息"></SubTitle>
        <div class="pt-20px">
          <CCForm
            :params="state.customerInfoParams"
            :forms="state.activateInfoForms"
            :gutter="20"
            label-position="top"
            ref="activateInfoRef"
            @handle-check-box-change="handleCheckBoxChange"
          >
            <template #contractList="{ form }">
              <CCUpload :form="form" @custom-upload="customUpload" @handle-remove="handleRemove"></CCUpload>
            </template>
          </CCForm>
        </div>
      </el-card>
      <el-card shadow="never" class="mt-10px">
        <SubTitle title="登录信息"></SubTitle>
        <div class="p-20px bg-linear-purple rounded-10px my-15px">
          <p class="text-[#6B678E] text-[14px]">说明：</p>
          <p class="py-10px text-[#6b678E]">
            1、运营管理平台登录地址：<el-link type="primary" href="https://test-ope.qingyunzu.com"
              >https://test-ope.qingyunzu.com</el-link
            >
          </p>
          <p class="text-[#6b678E]">2、首次登录时默认密码为登录手机号的后6位。</p>
        </div>
        <div class="relative">
          <CCForm
            :params="state.customerInfoParams"
            :forms="state.loginInfoForms"
            :gutter="20"
            label-position="top"
            ref="loginInfoRef"
          ></CCForm>
          <div class="absolute bottom-25px right-34%" v-if="!route.query.id">
            <el-button type="primary" link :disabled="isClickSend" @click="sendCode">{{
              codeNum == 60 ? (isOpenClearCount ? "重新获取" : "获取验证码") : `(${codeNum}s)获取验证码`
            }}</el-button>
          </div>
        </div>
      </el-card>
    </el-scrollbar>
    <div class="text-center w-full bg-[#fff] my-20px">
      <el-button type="primary" size="large" class="my-10px" @click="handleAddConfirm">
        {{ buttonText }}
      </el-button>
    </div>
  </base-container>
</template>

<script setup name="AddCustomer">
  import {
    customerInfoParams,
    customerInfoForms,
    EnterpriseInfoForms,
    corporateIdentityInfoForms,
    activateInfoForms,
    loginInfoForms,
  } from "@/crudOption/customer/edit";
  import SubTitle from "@/views/customer/component/SubTitle/index.vue";
  import CCForm from "@/views/customer/component/CCForm/index.vue";
  import CCUpload from "@/views/customer/component/UpLoad/index.vue";
  import dayjs from "dayjs";
  import { onMounted, reactive, ref, computed, nextTick, watch } from "vue";
  import { useRouter, useRoute } from "vue-router";
  import { ElMessage } from "element-plus";
  import { omit, uniq, uniqBy, cloneDeep } from "lodash";
  import { commonUpload } from "@/api/model/files.js";
  const router = useRouter();
  const route = useRoute();
  const state = reactive({
    customerInfoParams: { ...customerInfoParams }, //新增编辑提交的对象参数
    customerInfoForms: cloneDeep(customerInfoForms), //客户信息表单配置
    EnterpriseInfoForms: cloneDeep(EnterpriseInfoForms), //企业信息表单配置
    corporateIdentityInfoForms: cloneDeep(corporateIdentityInfoForms), //法人身份信息表单配置
    activateInfoForms: cloneDeep(activateInfoForms), //开通信息表单配置
    loginInfoForms: cloneDeep(loginInfoForms), //登录信息表单配置
  });
  const customerInfoRef = ref(null);
  const EnterpriseInfoRef = ref(null);
  const corporateIdentityInfoRef = ref(null);
  const activateInfoRef = ref(null);
  const loginInfoRef = ref(null);
  const scrollRef = ref(null);

  // 定时器id
  const clearId = ref(null);
  // 倒计时时间
  const codeNum = ref(60);
  // 是否发送了验证码 防止连点
  const isClickSend = ref(false);
  const isOpenClearCount = ref(0);
  //获取验证码接口
  const sendCode = async () => {
    if (!state.customerInfoParams.loginPhone) {
      ElMessage.error("请输入登录手机号");
      return false;
    }
    if (isClickSend.value || codeNum.value != 60) return;
    isClickSend.value = true;
    const res = await loadSendVerificationCode();
    clearId.value = setInterval(() => {
      codeNum.value--;
      if (codeNum.value == 0) {
        clearInterval(clearId.value);
        isOpenClearCount.value++;
        codeNum.value = 60;
        isClickSend.value = false;
      }
    }, 1000);
  };
  const loadAddCustomer = (data = state.customerInfoParams) => {
    Api.customer.AddCustomer(data).then(res => {
      initAddData();
      router.push({ path: "/customer/list" });
      ElMessage.success(res.message);
    });
  };
  //编辑接口
  const loadUpdateCustomer = (data = state.customerInfoParams) => {
    Api.customer.UpdateCustomer(data).then(res => {
      initAddData();
      router.push({ path: "/customer/list" });
      ElMessage.success(res.message);
    });
  };
  //确认新增/编辑
  const handleAddConfirm = () => {
    let { customerInfoParams } = state;
    customerInfoRef.value.formRef.validate(customerInfoValid => {
      if (customerInfoValid) {
        EnterpriseInfoRef.value.formRef.validate(EnterpriseInfoValid => {
          if (EnterpriseInfoValid) {
            if (customerInfoParams.businessLicense) {
              customerInfoParams.businessLicenseStart = customerInfoParams.businessLicense[0];
              customerInfoParams.businessLicenseEnd = customerInfoParams.businessLicense[1];
            }
            corporateIdentityInfoRef.value.formRef.validate(corporateIdentityInfoValid => {
              if (corporateIdentityInfoValid) {
                activateInfoRef.value.formRef.validate(activateInfoValid => {
                  if (activateInfoValid) {
                    if (customerInfoParams.validityPeriod) {
                      customerInfoParams.validityPeriodStart = customerInfoParams.validityPeriod[0];
                      customerInfoParams.validityPeriodEnd = customerInfoParams.validityPeriod[1];
                    }
                    loginInfoRef.value.formRef.validate(loginInfoValid => {
                      if (loginInfoValid) {
                        console.log({ customerInfoParams });
                        let _data = cloneDeep(customerInfoParams);
                        const data = omit(_data, ["businessLicense", "validityPeriod"]);
                        data.channelCode = uniq(data.channelCode);
                        data.paymentMethod = uniq(data.paymentMethod);
                        data.channelCode = data.channelCode.join(",");
                        data.paymentMethod = data.paymentMethod.join(",");
                        if (data.businessCategory && data.businessCategory.length > 0) {
                          // data.businessCategoryString=JSON.stringify(data.businessCategory)
                          const _businessCategory = data.businessCategory.map(item => item[item.length - 1]);
                          data.businessCategory = _businessCategory.join(",");
                        } else {
                          data.businessCategory = "";
                        }
                        console.log(data);

                        if (!route.query.id) {
                          loadAddCustomer(data);
                        } else {
                          data.id = route.query.id;
                          loadUpdateCustomer(data);
                        }
                      } else {
                        scrollRef.value.setScrollTop(1600);
                      }
                    });
                  } else {
                    scrollRef.value.setScrollTop(1500);
                  }
                });
              } else {
                scrollRef.value.setScrollTop(1500);
              }
            });
          } else {
            scrollRef.value.setScrollTop(600);
          }
        });
      } else {
        scrollRef.value.setScrollTop(0);
      }
    });
  };
  //获取字典接口
  const loadGetDict = (dictCode = "") => {
    Api.customer
      .DictListChildrenByDictCode({ dictCode })
      .then(res => {
        if (res.data) {
          let options = res.data.map(item => ({ ...item, value: item.dictValue, label: item.dictLabel }));
          if (dictCode.includes("validityPeriodType")) {
            state.EnterpriseInfoForms[6].options = options;
          }
          if (dictCode.includes("businessLicenseType")) {
            state.EnterpriseInfoForms[2].options = options;
          }
        }
      })
      .catch(err => {
        console.log(err);
      });
  };
  //获取验证码接口
  const loadSendVerificationCode = (mobile = state.customerInfoParams.loginPhone) => {
    Api.customer
      .SendVerificationCode({ mobile })
      .then(res => {
        if (res.code == 200) {
          ElMessage.success(res.message);
          state.customerInfoParams.verificationCode = "";
        }
        return res;
      })
      .catch(error => {
        isOpenClearCount.value++;
        clearInterval(clearId.value);
        isClickSend.value = false;
      });
  };
  //身份证参数
  const idCardParams = ref({ frontUrl: "", backUrl: "" });
  //上传图片处理
  const handleUploadChange = ({ url, form }) => {
    if (form.prop != "contractList") {
      form.fileList = [{ url: url }];
      state.customerInfoParams[form.prop] = url;
      if (form.prop == "businessLicenseUrl") {
        loadEsignLincense({ img: url });
      }
      if (form.prop == "idCardBackUrl") {
        idCardParams.value.backUrl = url;
        if (idCardParams.value.backUrl && idCardParams.value.frontUrl) {
          loadEsignIdCard(idCardParams.value);
        }
      }
      if (form.prop == "idCardFrontUrl") {
        idCardParams.value.frontUrl = url;
        if (idCardParams.value.backUrl && idCardParams.value.frontUrl) {
          loadEsignIdCard(idCardParams.value);
        }
      }
    }
  };
  // 营业照识别
  const loadEsignLincense = data => {
    data.consumerType = "1";
    Api.customer.EsignLincense(data).then(res => {
      if (res.data.code == 0) {
        let { name, certNo, type, address, capital, scope } = res.data.data;
        state.customerInfoParams.companyName = name;
        state.customerInfoParams.businessScope = scope;
        state.customerInfoParams.businessLicenseNo = certNo;
        state.customerInfoParams.companyCapital = capital;
        state.customerInfoParams.businessLicenseAddress = address;
        if (type.includes("个体")) {
          state.customerInfoParams.businessLicenseType = "02";
        } else {
          state.customerInfoParams.businessLicenseType = "01";
        }
        console.log(res.data.data.validTerm, "res.data.data.validTerm");
        if (res.data.data.validTerm) {
          if (res.data.data.validTerm.includes("长期")) {
            let validTerm = res.data.data.validTerm
              .replace(/长期/g, "2099年12月31日")
              .replace(/至/g, ",")
              .replace(/年/g, "-")
              .replace(/月/g, "-")
              .replace(/日/g, "");
            let businessLicense = validTerm.split(",");
            if (businessLicense && businessLicense.length === 2) {
              businessLicense = businessLicense.map(item => dayjs(item).format("YYYY-MM-DD"));
            }
            state.customerInfoParams.businessLicense = businessLicense;
            state.customerInfoParams.validTermType = "02";
          } else {
            let validTerm = res.data.data.validTerm
              .replace(/至/g, ",")
              .replace(/年/g, "-")
              .replace(/月/g, "-")
              .replace(/日/g, "");
            console.log({ validTerm });
            let businessLicense = validTerm.split(",");
            if (businessLicense && businessLicense.length === 2) {
              businessLicense = businessLicense.map(item => dayjs(item).format("YYYY-MM-DD"));
            }
            state.customerInfoParams.businessLicense = businessLicense;
            state.customerInfoParams.validTermType = "01";
          }
        }
        handleSelectChange({
          value: state.customerInfoParams.businessLicenseType,
          form: { prop: "businessLicenseType" },
        });
      } else {
        ElMessage.error(res.data.message);
        state.customerInfoParams.businessLicenseUrl = "";
        state.EnterpriseInfoForms[0].fileList = [];
      }
    });
  };
  // 身份证识别
  const loadEsignIdCard = data => {
    data.consumerType = "1";
    Api.customer.EsignIdCard(data).then(res => {
      if (res.data.code == 0) {
        state.customerInfoParams.legalPersonName = res.data.data.name;
        state.customerInfoParams.legalPersonIdCard = res.data.data.idNo;
      } else {
        ElMessage.error(res.data.message);
        state.customerInfoParams.legalPersonName = "";
        state.customerInfoParams.legalPersonIdCard = "";
        state.corporateIdentityInfoForms[0].fileList = [];
        state.corporateIdentityInfoForms[1].fileList = [];
      }
    });
  };
  // 获取运营模式接口
  const loadModeList = () => {
    Api.customer.ModeList().then(res => {
      if (res.data) {
        state.activateInfoForms[1].options = res.data.map(item => ({
          ...item,
          value: item.id.toString(),
          label: item.modeName,
        }));
      }
    });
  };

  //获取详情接口
  const loadCustomerDetail = (id = route.query.id) => {
    Api.customer.CustomerDetail({ id }).then(res => {
      if (res.data) {
        res.data.channelCode = res.data.channelCode.split(",");
        res.data.paymentMethod = res.data.paymentMethod.split(",");
        if (res.data.businessLicenseStart && res.data.businessLicenseEnd) {
          res.data.businessLicense = [res.data.businessLicenseStart, res.data.businessLicenseEnd];
        }
        if (res.data.validityPeriodEnd && res.data.validityPeriodStart) {
          res.data.validityPeriod = [res.data.validityPeriodStart, res.data.validityPeriodEnd];
        }
        if (res.data.businessLicenseUrl) {
          state.EnterpriseInfoForms[0].fileList = [{ url: res.data.businessLicenseUrl }];
        }
        if (res.data.customerLogo) {
          state.customerInfoForms[0].fileList = [{ url: res.data.customerLogo }];
        }
        if (res.data.idCardFrontUrl) {
          state.corporateIdentityInfoForms[0].fileList = [{ url: res.data.idCardFrontUrl }];
        }
        if (res.data.idCardBackUrl) {
          state.corporateIdentityInfoForms[1].fileList = [{ url: res.data.idCardBackUrl }];
        }
        if (res.data.businessCategory) {
          res.data.businessCategory = res.data.businessCategory.split(",");
          res.data.businessCategory = res.data.businessCategory.map(item => item * 1);
        }
        if (res.data.contractList) {
          state.activateInfoForms[state.activateInfoForms.length - 1].fileList = res.data.contractList.map(item => ({
            ...item,
            url: item.contractFileUrl,
            name: item.contractFileName,
            type: item.contractFileType,
          }));
          console.log(state.activateInfoForms[6].fileList, "state.activateInfoForms[6].fileList");
        }
        if (res.data.operationModeId) {
          res.data.operationModeId = res.data.operationModeId.toString();
        }

        // businessCategory
        // if(res.data.businessCategory){
        //   state.customerInfoParams.businessCategory = res.data.businessCategory.split(",");
        // }
        console.log(res.data, "res.data");

        state.customerInfoParams = res.data;
      }
      ElMessage.success("获取数据成功");
    });
  };
  //确认新增编辑按钮文字
  const buttonText = computed(() => {
    if (route.query.id) {
      return "确认编辑";
    } else {
      return "确认新增";
    }

    // const h = toLen(props.btnHeight);
    // return h ? { height: h, lineHeight: h } : {};
  });
  //删除上传文件处理
  const handleRemove = ({ fileList, form }) => {
    form.fileList = fileList;
    if (form.prop !== "contractList") {
      state.customerInfoParams[form.prop] = "";
    } else {
      console.log(form.fileList, "form.fileList");
      state.customerInfoParams[form.prop] = fileList;
      // form.fileList
    }
  };

  const handleCheckBoxChange = ({ form }) => {
    if (form.prop === "channelCode") {
      if (state.customerInfoParams.channelCode.includes("01")) {
        state.customerInfoParams.paymentMethod.push("01");
        state.customerInfoParams.paymentMethod = uniq(state.customerInfoParams.paymentMethod);
      } else {
        let index = state.customerInfoParams.paymentMethod.indexOf("01");
        if (index !== -1) {
          state.customerInfoParams.paymentMethod.splice(index, 1);
          state.customerInfoParams.paymentMethod = uniq(state.customerInfoParams.paymentMethod);
        }
      }
      if (state.customerInfoParams.channelCode.includes("02")) {
        state.customerInfoParams.paymentMethod.push("02");
        state.customerInfoParams.paymentMethod = uniq(state.customerInfoParams.paymentMethod);
      } else {
        let index = state.customerInfoParams.paymentMethod.indexOf("02");
        if (index !== -1) {
          state.customerInfoParams.paymentMethod.splice(index, 1);
          state.customerInfoParams.paymentMethod = uniq(state.customerInfoParams.paymentMethod);
        }
      }
    }
  };

  const customUpload = async ({ file, form }) => {
    const formData = new FormData();
    formData.append("file", file);
    commonUpload(formData, { fileType: 2, isSecretFile: true })
      .then(res => {
        if (res.code == 200) {
          file.url = res.data;
          file.contractFileUrl = res.data;
          file.contractFileName = file.name;
          let index = file.name.indexOf(".");
          let contractFileType = file.name.substring(index + 1);
          file.contractFileType = contractFileType;
          if (form.prop === "customerLogo") {
            form.fileList = [{ url: res.data }];
            state.customerInfoParams[form.prop] = res.data;
            customerInfoRef.value.formRef.clearValidate(["customerLogo"]);
          }
          if (form.prop === "businessLicenseUrl") {
            form.fileList = [{ url: res.data }];
            state.customerInfoParams[form.prop] = res.data;
            loadEsignLincense({ img: res.data });
            EnterpriseInfoRef.value.formRef.clearValidate(["businessLicenseUrl"]);
          }
          if (form.prop === "idCardFrontUrl") {
            form.fileList = [{ url: res.data }];
            state.customerInfoParams[form.prop] = res.data;
            idCardParams.value.frontUrl = res.data;
            corporateIdentityInfoRef.value.formRef.clearValidate(["idCardFrontUrl"]);
          }
          if (form.prop === "idCardBackUrl") {
            form.fileList = [{ url: res.data }];
            state.customerInfoParams[form.prop] = res.data;
            idCardParams.value.backUrl = res.data;
            corporateIdentityInfoRef.value.formRef.clearValidate(["idCardBackUrl"]);
          }
          if (idCardParams.value.backUrl && idCardParams.value.frontUrl) {
            loadEsignIdCard(idCardParams.value);
          }
          if (form.prop === "contractList") {
            form.fileList.push(file);
            state.customerInfoParams[form.prop].push(file);
            if (state.customerInfoParams[form.prop] && state.customerInfoParams[form.prop].length) {
              state.customerInfoParams[form.prop] = uniqBy(state.customerInfoParams[form.prop], "uid");
            }
            if (form.fileList) {
              form.fileList = uniqBy(form.fileList, "uid");
            }
            activateInfoRef.value.formRef.clearValidate(["contractList"]);
          }
        }
      })
      .catch(error => {
        console.log(error, "error");
      });
  };
  const businessLicenseTypeTitle = ref("法人身份信息");

  const handleSelectChange = ({ value, form }) => {
    if (form.prop === "validTermType") {
      if (value == "02") {
        let startTime = dayjs().format("YYYY-MM-DD");
        state.customerInfoParams.businessLicense = [startTime, "2099-12-31"];
      } else {
        state.customerInfoParams.businessLicense = [];
      }
    }
    if (form.prop === "businessLicenseType") {
      //01企业02个体工商户
      if (state.customerInfoParams.businessLicenseType == "01") {
        businessLicenseTypeTitle.value = "法人身份信息";
        // console.log()
        state.corporateIdentityInfoForms[2].label = "法人姓名";
        state.corporateIdentityInfoForms[3].label = "法人身份证号";
      } else {
        businessLicenseTypeTitle.value = "经营者身份信息";
        state.corporateIdentityInfoForms[2].label = "经营者姓名";
        state.corporateIdentityInfoForms[3].label = "经营者身份证号";
      }
    }
  };

  const initAddData = () => {
    nextTick(() => {
      if (customerInfoRef.value) {
        customerInfoRef.value.formRef.resetFields();
      }
      if (EnterpriseInfoRef.value) {
        EnterpriseInfoRef.value.formRef.resetFields();
      }
      if (corporateIdentityInfoRef.value) {
        corporateIdentityInfoRef.value.formRef.resetFields();
      }
      if (activateInfoRef.value) {
        activateInfoRef.value.formRef.resetFields();
      }
      if (loginInfoRef.value) {
        loginInfoRef.value.formRef.resetFields();
      }

      state.customerInfoParams.customerLogo = [];
      state.customerInfoForms[0].fileList = [];
      state.EnterpriseInfoForms[0].fileList = [];
      state.corporateIdentityInfoForms[0].fileList = [];
      state.corporateIdentityInfoForms[1].fileList = [];
      state.activateInfoForms[6].fileList = [];
      state.loginInfoForms[0].disabled = false;
      state.loginInfoForms[1].hidden = false;
      state.customerInfoParams = {
        customerName: "",
        customerContactName: "",
        customerContactPhone: "",
        customerContactEmail: "",
        customerDesc: "",
        companyName: "",
        businessLicenseType: "",
        businessLicenseNo: "",
        businessLicenseAddress: "",
        companyCapital: "",
        validTermType: "",
        businessScope: "",
        businessLicense: "" || [],
        idCardFrontUrl: "" || [],
        idCardBackUrl: "" || [],
        legalPersonName: "",
        legalPersonIdCard: "",
        validityPeriod: "" || [],
        operationModeId: "",
        openFee: "",
        channelCode: [],
        paymentMethod: [],
        contractList: [],
        loginPhone: "",
        verificationCode: "",
        validityPeriodStart: "",
        validityPeriodEnd: "",
        id: "",
      };
    });
  };

  //经营类目接口函数
  const loadCategoryList = (data = {}) => {
    Api.customer.CategoryList(data).then(res => {
      state.activateInfoForms[3].options = res.data.records;
    });
  };

  onMounted(() => {
    console.log(route.query.id, "route.query.id");
    if (route.query.id && route.query.operationType == "edit") {
      state.loginInfoForms[0].disabled = true;
      state.loginInfoForms[1].hidden = true;
      loadCustomerDetail(route.query.id);
    }
    loadGetDict("qingyun.support.customer.validityPeriodType"); //有效期类型
    loadGetDict("qingyun.support.customer.businessLicenseType"); //营业执照类型
    loadCategoryList(); //经营类目接口函数
    loadModeList();
  });
  // 监听ruoter.query.id
  watch(
    () => route.query.id,
    newValue => {
      if (newValue) {
        state.loginInfoForms[0].disabled = true;
        state.loginInfoForms[1].hidden = true;
        loadCustomerDetail(route.query.id);
        loadGetDict("qingyun.support.customer.validityPeriodType"); //有效期类型
        loadGetDict("qingyun.support.customer.businessLicenseType"); //营业执照类型
        loadCategoryList(); //经营类目接口函数
        loadModeList();
      } else {
        console.log(111);
      }
    }
  );
</script>
<style lang="scss" scoped>
  :deep(.el-card) {
    background: linear-gradient(180deg, var(--bd8) 0%, var(--bg) 76px);
    border-radius: 10px;
  }

  .bg-linear-purple {
    background: linear-gradient(180deg, var(--bd8) 0%, var(--bg) 76px);
  }
</style>
